<template>
  <div>
    <el-card class="box-card" shadow="never" style="margin-bottom: 24px;">
      <div slot="header" class="header">
        <span class="title webfont-Medium">{{ title }}</span>

        <el-tooltip class="item " effect="dark" :content="timeArr[0]+'至'+timeArr[1]+'周期内的花费总和'" placement="top">
          <i class="el-icon-warning" />
        </el-tooltip>
      </div>

      <div class="box-main">
        <countTo
          :start-val="0"
          :end-val="currentPeriod*1"
          :duration="1500"
          class="main-num webfont-Heavy"
          :decimals="2"
          :prefix="unitTxt "
        />
        <div class="ring">
          <p class="total">

            <el-tooltip class="item" effect="dark" :content="'对比'+lastCycle[0]+'至'+lastCycle[1]" placement="top">
              <span class="pointer" style="color: #ACB6C2;">环比</span>
            </el-tooltip>
            <strong v-if="ring*100 !==0" :style="{color:setColor(ring)}">{{ ring }}%</strong>
            <i v-if="ring*100>0" class="el-icon-caret-top top" />
            <i v-if="ring*100===0" style="color:#39444e;margin: 0 8px;">持平</i>
            <i v-if="ring*100<0" class="el-icon-caret-bottom bottom " />
          </p>
          <!-- 日环比开始 -->
          <!-- <p v-if="dayRingShow()" class="day">
            <el-tooltip class="item" effect="dark" :content="'昨日对比'+beforeYesterday" placement="top">
              <span class="pointer" style="color: #ACB6C2;">日环比</span>
            </el-tooltip>
            <strong v-if="dayRing*100 !==0" :style="{color:setColor(dayRing)}">{{ dayRing }}%</strong>
            <i v-if="dayRing*100>0" class="el-icon-caret-top top " />
            <i v-if="dayRing*100<0" class="el-icon-caret-bottom bottom " />
            <i v-if="dayRing*100===0" style="color:#39444e;margin: 0 8px;">持平</i>
          </p> -->
          <!-- 日环比结束 -->
        </div>

      </div>
      <div class="box-footer">
        <el-tooltip class="item" effect="dark" :content="timeArr[0]+'至'+timeArr[1]+'周期内的花费平均值'" placement="top">
          <p>
            <span style="color: #ACB6C2;margin-right: 6px;" class="default">日均花费</span>
            {{ unit=='USD'?'$':'￥' }}
            <countTo :start-val="0" :end-val="pingJunNum" :decimals="2" :duration="10" class="num" />
          </p>
        </el-tooltip>

      </div>

    </el-card>
  </div>
</template>

<script>
import {
  getsLastPeriod,
  getBeforeYes,
  includeTime

} from '@/utils/moment.js'
import countTo from 'vue-count-to'
import {
  echartsOptions
} from '@/settings.js'

export default {
  components: {
    countTo
  },
  props: {
    title: { // 标题名称
      default: '展示',
      type: String
    },

    list: {
      default: () => {
        return []
      },
      type: String
    },

    unit: {
      type: String,
      default: function() {
        return this.$store.state.user.unit
      }
    },
    timeArr: { // 开始时间
      type: Object
    },

    currentPeriod: { // 本期平均数
      default: 0,
      type: Number
    }, // 环比增长率=(本期数-上期数)/上期数*100%
    previousPeriod: { // 上期平均数
      default: 0,
      type: Number
    },
    yesterdayNum: { // 昨天的平均数
      default: 0,
      type: Number
    }, // 日环比增长率=(昨天-前天)/前天数*100%
    bforeYesterdayNum: { // 前天的平均数
      default: 0,
      type: Number
    }
  },
  data() {
    return {}
  },

  computed: {
    // 上个周期的值
    lastCycle() {
      const that = this
      if (this.timeArr.length) {
        return getsLastPeriod(this.timeArr)
      }
    },

    beforeYesterday() {
      return getBeforeYes()
    },
    unitTxt() {
      const unit = this.$store.state.user.unit
      const text = unit === 'RMB' ? '￥' : '$'

      return text
    },

    pingJunNum() {
      if (this.list.length) {
        return this.currentPeriod / this.list.length
      }
      return 0
    },

    ring() {
      const now = this.currentPeriod
      const old = this.previousPeriod
      if (old * 100 === 0) {
        if (now * 100 === 0) {
          // 如果这个周期也是0  那就是0增长
          return 0.00
        } else {
          // 如果上个周期为0  这个周期有数据则为+100%
          return 100
        }
      } else {
        // 如果上周期数据不是0,这个周期是0那就是负增长
        if (now * 100 === 0) {
          return (old * -100).toFixed(2)
        } else {
          const num = ((now * 100) - (old * 100)) / (now * 100)
          return (num * 100).toFixed(2)
        }
      }
    },
    dayRing() {
      const now = this.yesterdayNum
      const old = this.bforeYesterdayNum
      if (old * 100 === 0) {
        if (now * 100 === 0) {
          // 如果这个周期也是0  那就是0增长
          return 0.00
        } else {
          // 如果上个周期为0  这个周期有数据则为+100%
          return 100
        }
      } else {
        // 如果上周期数据不是0,这个周期是0那就是负增长
        if (now * 100 === 0) {
          return (old * -100).toFixed(2)
        } else {
          const num = ((now * 100) - (old * 100)) / (now * 100)
          return (num * 100).toFixed(2)
        }
      }
    }
  },
  methods: {
    setColor(ringNum) {
      const num = ringNum * 100
      if (num > 1) {
        return '#E9716A'
      } else if (num === 1) {
        return '#39444E'
      } else {
        return '#24BEBE'
      }
    },
    dayRingShow() {
      return includeTime(this.timeArr[1])
    }
  }
}
</script>
<style lang="scss" scoped="true">
  @import '~@/styles/variables.scss';

  .box-card {
    ::v-deep.el-card__header {
      border: none !important;
    }

    .header {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .title {
        font-size: 14px;
        margin-right: 6px;

      }

      i {
        font-size: 16px;
        border-radius: 50%;
        color: #c4c4c4;
      }
    }

    ::v-deep .el-card__body {
      padding: 16px !important;
      padding-top: 0;
    }

    ::v-deep .el-card__header {
      padding: 16px;
      padding-bottom: 8px;
    }

    .box-main {

      ::v-deep.main-num,
      >span {
        color: rgba(0, 0, 0, 0.85);
        font-size: 24px;
        line-height: 26px;
        font-family: 'Roboto-Bold', "PingFangSC-Medium", PingFangSC, sans-serif !important;
      }

      .ring {

        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        padding-top: 30px;
        color: #ACB6C2;

        p {
          display: flex;
          align-items: center;
          font-size: 12px;
        }

        span {

          padding-right: 10px;
        }

        strong {
          padding-right: 8px;

          font-weight: 400;
        }

        .bottom {
          color: $mainColor1;
        }

        .top {
          color: #E9716A;
        }
      }

    }

    .box-footer {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid rgba(57, 68, 78, 0.1);
      margin-top: 14px;

      p {
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;

        span {
          margin-right: 18px;
          color: rgba(0, 0, 0, 0.45);
        }

        ::v-deep.num {
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
</style>
